<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<f:view>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Travel Home Page</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
	<div id="page">
		<div id="left">
			<h2>Navigation</h2>
			<ul>
				<li><a href="http://css.alsacreations.com/">Tutoriel : un design fluide avec trois colonnes</a></li>
				<li><a href="exemple-1.html">Exemple : bloc central sans marges</a></li>
				<li><strong>Exemple : bloc central avec marges compensant les flottants</strong></li>
				<li><a href="exemple-3.html">Exemple : bloc central sans marges, mais avec un contexte de formatage</a></li>
			</ul>
		</div>
	
		<div id="right">
		<h2>Navigation</h2>
			<ul>
				<li><a href="http://css.alsacreations.com/">Tutoriel : un design fluide avec trois colonnes</a></li>
				<li><a href="exemple-1.html">Exemple : bloc central sans marges</a></li>
				<li><strong>Exemple : bloc central avec marges compensant les flottants</strong></li>
				<li><a href="exemple-3.html">Exemple : bloc central sansmarges, mais avec un contexte de formatage</a></li>
			</ul>
		</div>
	
		<!-- le corps de la page à 600px -->
		<div id="center"><img src="banniere.gif" width="600" />
		<table>
		<tr><td>
		<h:form>
			<table id="ver-minimalist" width="600">
				
					<tr>
						<td colspan="2">Selectionnez votre vol à destination de ${destination}</td>
					</tr> 
					<tr>
						<td align="right"><h:selectOneMenu title="villeDepart" value="#{volBean.villeDepart}">
							<f:selectItem itemLabel="Selectionnez ..." itemValue="0" />
							<f:selectItems value="#{villeBean.villes}" />
						</h:selectOneMenu></td>
						<td><h:outputText value="Date de depart : "/><h:inputText value="#{volBean.dateDepart}"/></td>
					</tr>
					<tr>
						<td align="right"><h:selectOneMenu title="villeDestination"  value="#{volBean.villeDestination}">
							<f:selectItem itemLabel="Selectionnez ..." itemValue="0" />
							<f:selectItems value="#{villeBean.villes}" />
						</h:selectOneMenu></td>					
						<td><h:outputText value="Date de retour : " /><h:inputText value="#{volBean.dateRetour}"/></td>
					</tr>
					<tr>
						<td align="right"><h:commandButton value="Rechercher" action="#{volBean.rechercherVols}"/></td>
					</tr>
				
			</table>
		</h:form>
		<br/>
	  </td>
	</tr>
	<tr>
		<td><span class="texteAMoi">Tous les vols depart : </span><h:dataTable value="#{volBean.volsAller}" var="vol" styleClass="rounded-corner">
			<h:column>
				<h:outputText value="#{vol.dateDepart}" >
					<f:convertDateTime type="date" dateStyle="short"/>
				</h:outputText>
			</h:column>
			<h:column>
				<h:outputText value="#{vol.dateArrivee}" >
					<f:convertDateTime type="date" dateStyle="short"/>
				</h:outputText>
			</h:column>
			<h:column>
				<h:outputText value="#{vol.depart.nom}"/>
			</h:column>
			<h:column>
				<h:outputText value="#{vol.arrivee.nom}"/>
			</h:column>
			<h:column>
				<h:outputText value="#{vol.prix}" />
			</h:column>
			<h:column><h:form>
				<h:commandLink action="#{volBean.selectVolAller}">
					<h:outputText value="Selectionner" style="rounded-corner" />
					<f:setPropertyActionListener  value="#{vol.id}" target="#{volBean.volAllerId}"/>
				</h:commandLink>
			</h:form>
			</h:column>
		</h:dataTable>
		
		<br/>
		</td>
	  </tr>
	  <tr>
	    <td>
		<!-- Liste des Vols Retour -->
		<span class="texteAMoi">Tous les vols retour : </span><h:dataTable value="#{volBean.volsRetour}" var="vol" styleClass="rounded-corner">
			<h:column>
				<h:outputText value="#{vol.dateDepart}" >
					<f:convertDateTime type="date" dateStyle="short"/>
				</h:outputText>
			</h:column>
			<h:column>
				<h:outputText value="#{vol.dateArrivee}" >
					<f:convertDateTime type="date" dateStyle="short"/>
				</h:outputText>
			</h:column>
			<h:column>
				<h:outputText value="#{vol.depart.nom}"/>
			</h:column>
			<h:column>
				<h:outputText value="#{vol.arrivee.nom}"/>
			</h:column>
			<h:column>
				<h:outputText value="#{vol.prix}" />
			</h:column>
			<h:column>
				<h:form>
				<h:commandLink action="#{volBean.selectVolRetour}">
					<h:outputText value="Selectionner" style="rounded-corner" />
					<f:setPropertyActionListener  value="#{vol.id}" target="#{volBean.volRetourId}"/>
				</h:commandLink>
			</h:form>
			</h:column>
		</h:dataTable>
		</tr></td>
		<tr><td>
			<table width="100%">
				<tr>
					<td align="center"><h:form>
					<h:commandButton value="Retour Resa"></h:commandButton>
				</h:form></td>
					<td align="center"><h:form>
					<h:commandButton action="#{volBean.validVol}" value="Validez vos vols">
						<f:setPropertyActionListener  value="#{volBean.volsChoisis}" target="#{reservationBean.volList}"/>
					</h:commandButton>
				</h:form></td>
				</tr>
			</table>
		</td></tr>
		
		<tr><td>
		<span class="texteAMoi">Liste des vols choisis par l'utilisateur :</span>
		
		<table class="rounded-corner">
			<c:forEach items="${volBean.volsChoisis}" var="vol">
				<tr>
					<td>
					<!--<h:outputText title="#{vol.dateDepart}" value="#{vol.dateDepart}">
						<f:convertDateTime type="date" dateStyle="short"/>
					</h:outputText>
					-->
					<c:out value="${vol.dateDepart}">
						<f:convertDateTime type="date" dateStyle="short"/>
					</c:out>
					</td>
					<td>
					<c:out value="${vol.dateArrivee}">
						<f:convertDateTime type="date" dateStyle="short"/>
					</c:out>
					<!--<h:outputText title="#{vol.dateArrivee}" value="#{vol.dateArrivee}">
						<f:convertDateTime type="date" dateStyle="short"/>
					</h:outputText>
					-->
					</td>
					<td>
					<c:out value="${vol.depart.nom}"></c:out>
					<!--<h:outputText title="#{vol.depart.nom}" value="#{vol.depart.nom}"/>-->
					</td>
					<td>
					<c:out value="${vol.arrivee.nom}"></c:out>
					<!--<h:outputText title="#{vol.vol.arrivee.nom}" value="#{vol.vol.arrivee.nom}"/>-->
					</td>					
					<td>
					<c:out value="${vol.prix}"></c:out>
					<!--<h:outputText title="#{vol.prix}" value="#{vol.prix}"/>-->
					</td>
				</tr>
			</c:forEach>
		</table>
		
		
		</td></tr>
		</table>
		</div>
	</div>
	</body>
	</html>
</f:view>